Está viendo un tema de ayuda de Laserfiche Cloud. Si no está utilizando Laserfiche Cloud, consulte la Guía del usuario de Laserfiche o la Guía de administración de Laserfiche .

Personalizaciones CSS para botones

En este tema se presentan ejemplos de personalizaciones CSS comunes para botones en un formulario. Las personalizaciones CSS solo cambian las propiedades estáticas, como la apariencia y la posición. Si desea mostrar u ocultar botones basados en otros eventos que se producen en el formulario, consulte Personalizaciones de JavaScript para botones.

En Formularios, los botones generalmente constan de un contenedor de botones y un elemento de entrada. A continuación se muestra el aspecto que puede tener el html para un botón Enviar:

<div class="btn-wrapper">
  <input type="submit" class="action-btn checkRequired Submit" name="action" 
  aria-labelledby="action" value="Submit">
</div>

El botón Enviar normalmente tiene el tipo submit. Otros botones, como los botones Anterior y Siguiente para formularios paginados, suelen tener el tipo button.

Para modificar la apariencia y la posición de un botón, a menudo es necesario apuntar al contenedor de botones (en nuestro fragmento de código anterior, este sería el elemento div con class btn-wrapper). En los ejemplos siguientes se muestran algunas personalizaciones comunes para los botones.

Cambiar las posiciones de los botones

Los siguientes conjuntos de reglas CSS centran el botón Enviar, que está alineado a la izquierda de forma predeterminada.

div.btn-wrapper {display:block}
.Submit {display:block; margin:auto}

Como vimos en el fragmento de código HTML anterior, el botón Enviar tiene la clase Submit. La segunda línea del fragmento de código CSS se dirige al botón mediante esta clase. La primera línea se dirige al contenedor de botones, utilizando el hecho de que es un elemento div con class btn-wrapper.

Establecer la display propiedad en significa que el elemento de destino block ocupará todo el ancho de la página y no se puede mostrar en paralelo con otros elementos. Establecer la margin propiedad en significa que el elemento de destino está centrado dentro de su auto contenedor.

Para alinear a la derecha un botón en su lugar, utilice la propiedad float:right en lugar margin:autode:

div.btn-wrapper {display:block}
.Submit {display:block; float:right}

Los botones Anterior y Siguiente están contenidos dentro de un div con la clase cf-pagination-btn. Están separados entre sí por un espaciador. Usaría div.cf-pagination-btn para orientar su contenedor, div.cf-pagination-btn-spacer para dirigirse al espaciador, .cf-prev-btn para dirigirse al botón Anterior y .cf-next-btn para dirigirse al botón Siguiente.

Cambiar la apariencia de los botones

Puede cambiar los colores de un botón mediante CSS. Aquí le mostramos cómo hacer esto para el botón de carga de archivos, que tiene la clase fileuploader. La propiedad background-color establece el color de fondo del botón. border-color establece el color del borde del botón. color establece el color del texto del botón. Cambiamos los tres colores en este fragmento:

.fileuploader {background-color:#2ab; 
		border-color:#2bc!important; 
		color:white;}

El fragmento de código anterior cambia los colores de todos los botones de carga de archivos del formulario, ya que se dirige a la clase , a la fileuploaderque pertenecen todos los botones de carga de archivos. Para cambiar el botón de carga de archivos solo para un campo determinado, utilice el explorador para determinar el identificador del botón de carga de archivos. En el siguiente fragmento de código, suponemos que el id Field60es:

input#Field60.fileuploader {
 	background-color:#2ab; 	
	border-color:#2bc!important; 
	color:white;}